<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约拍平台 - 设置</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .setting-group {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        .setting-item {
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
        }
        .setting-item:last-child {
            border-bottom: none;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
        }
        input:checked + .slider {
            background-color: #3b82f6;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        .slider.round {
            border-radius: 24px;
        }
        .slider.round:before {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <!-- 状态栏将通过JS加载 -->
    
    <div class="pt-7 pb-20">
        <!-- 顶部标题栏 -->
        <div class="bg-white px-4 py-3 flex items-center justify-between sticky top-0 z-10 shadow-sm">
            <a href="profile.html" class="text-gray-800">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-lg font-bold">设置</h1>
            <div class="w-5"></div>
        </div>
        
        <!-- 账号设置 -->
        <div class="p-4">
            <h2 class="text-sm text-gray-500 mb-2 px-1">账号设置</h2>
            <div class="setting-group">
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-user text-gray-400 w-6"></i>
                        <span class="ml-2">个人资料</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-lock text-gray-400 w-6"></i>
                        <span class="ml-2">账号安全</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-mobile-alt text-gray-400 w-6"></i>
                        <span class="ml-2">绑定手机</span>
                    </div>
                    <div class="flex items-center">
                        <span class="text-gray-400 text-sm mr-2">138****1234</span>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-id-card text-gray-400 w-6"></i>
                        <span class="ml-2">实名认证</span>
                    </div>
                    <div class="flex items-center">
                        <span class="text-green-500 text-sm mr-2">已认证</span>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
            </div>
            
            <!-- 隐私设置 -->
            <h2 class="text-sm text-gray-500 mb-2 mt-6 px-1">隐私设置</h2>
            <div class="setting-group">
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-eye text-gray-400 w-6"></i>
                        <span class="ml-2">作品可见性</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-bell text-gray-400 w-6"></i>
                        <span class="ml-2">消息通知</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-user-friends text-gray-400 w-6"></i>
                        <span class="ml-2">黑名单管理</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
            </div>
            
            <!-- 通用设置 -->
            <h2 class="text-sm text-gray-500 mb-2 mt-6 px-1">通用设置</h2>
            <div class="setting-group">
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-moon text-gray-400 w-6"></i>
                        <span class="ml-2">深色模式</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-globe text-gray-400 w-6"></i>
                        <span class="ml-2">语言</span>
                    </div>
                    <div class="flex items-center">
                        <span class="text-gray-400 text-sm mr-2">简体中文</span>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-trash-alt text-gray-400 w-6"></i>
                        <span class="ml-2">清除缓存</span>
                    </div>
                    <div class="flex items-center">
                        <span class="text-gray-400 text-sm mr-2">23.5MB</span>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
            </div>
            
            <!-- 关于我们 -->
            <h2 class="text-sm text-gray-500 mb-2 mt-6 px-1">关于</h2>
            <div class="setting-group">
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-info-circle text-gray-400 w-6"></i>
                        <span class="ml-2">关于我们</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-file-alt text-gray-400 w-6"></i>
                        <span class="ml-2">用户协议</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-shield-alt text-gray-400 w-6"></i>
                        <span class="ml-2">隐私政策</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-headset text-gray-400 w-6"></i>
                        <span class="ml-2">联系客服</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
            </div>
            
            <!-- 退出登录 -->
            <div class="mt-8">
                <button class="w-full py-3 bg-white text-red-500 rounded-lg font-medium">退出登录</button>
            </div>
            
            <!-- 版本信息 -->
            <div class="text-center text-xs text-gray-400 mt-6">
                版本 1.0.0
            </div>
        </div>
    </div>
    
    <script>
        // 加载状态栏
        document.addEventListener('DOMContentLoaded', function() {
            // 创建iOS状态栏
            const statusBar = document.createElement('div');
            statusBar.className = 'bg-black text-white h-7 flex items-center justify-between px-4 text-xs fixed top-0 left-0 right-0 z-50';
            statusBar.innerHTML = `
                <div>
                    <span>9:41</span>
                </div>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            `;
            document.body.prepend(statusBar);
            
            // 设置项点击事件
            const settingItems = document.querySelectorAll('.setting-item');
            settingItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 这里可以添加点击后的跳转或弹窗逻辑
                });
            });
        });
    </script>
</body>
</html> 